<template>
  <div class="kaoqin-header">
    <el-row>
      <!-- 欢迎语句 -->
      <el-col :span="11">
        <div class="grid-content1 ep-bg-purple">
          <h2 class="title">上午好呀，叶美玉老师~</h2>
          <p class="words">
            今天是大圣蒲公英后台管理系统陪伴你的第
            <span class="green">288</span> 天,继续加油呀!
          </p>
        </div>
      </el-col>
      <!-- 搜索 -->
      <el-col :span="12">
        <div class="grid-content1 ep-bg-purple">
          <div class="top-search">
            <input
              type="search"
              class="top-input"
              placeholder="可搜索: 学生姓名、学号、教学用具等信息"
            />
            <span class="input-icon">
              <el-icon :size="16" color="#aab2bd"><Search /></el-icon>
            </span>
            <!-- 消息图标 -->
            <div class="msg-box">
              <span class="msg">
                <el-icon :size="24" class="green"><Bell /></el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 头像 -->
      <el-col :span="1">
        <div class="grid-content1 ep-bg-purple aver">
          <div class="demo-type">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="cards">
    <!-- layout布局插件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="20" class="green"><Calendar /></el-icon>
                <span>&nbsp;考勤签到</span>
              </div>
              <el-button class="button" text>
                <el-icon :size="20" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="card-day item">
                今日<span class="green">未签到</span>
              </div>
              <div class="card-btn item" style="height: 36px">
                <el-button color="#e2f6f6" size="small">
                  <span class="green">立即签到</span>
                </el-button>
              </div>
              <div class="card-bottom item">
                <span>小贴士</span>
                <span>一分钟前</span>
              </div>
            </div>
            <!-- <div v-for="o in 3" :key="o" class="text item">
              {{ "List item " + o }}
            </div> -->
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="20" class="green"><Avatar /></el-icon>
                <span>&nbsp;学生点名</span>
              </div>
              <el-button class="button" text>
                <el-icon :size="20" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="card-day item2">
                今日2201班<span class="green">未点名</span>记得点名哦
              </div>
              <div class="card-day item2">
                今日2202班<span class="green">未点名</span>记得点名哦
              </div>
              <div class="card-day item2">今日2203班已点名</div>
              <div class="card-bottom item2">
                <span>小贴士</span>
                <span>一分钟前</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="20" class="green"><UploadFilled /></el-icon>
                <span>&nbsp;作品上传</span>
              </div>
              <el-button class="button" text>
                <el-icon :size="20" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="card-day item2">
                202202班<span class="green">未上传，</span>请尽快上传哦
              </div>
              <div class="card-day item2">
                202203班<span class="green">未上传</span>请尽快上传哦
              </div>
              <div class="card-day item2">202201班已上传</div>
              <div class="card-bottom item2">
                <span>小贴士</span>
                <span>一分钟前</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple">
          <!-- card 插件-->
          <el-card class="box-card" :body-style="{ padding: '12px' }">
            <div class="card-header">
              <div class="card-title">
                <el-icon :size="20" class="green"><Comment /></el-icon>
                <span>&nbsp;作品点评</span>
              </div>
              <el-button class="button" text>
                <el-icon :size="20" color="#8f8f8f"><MoreFilled /></el-icon>
              </el-button>
            </div>
            <div class="card-content text">
              <div class="card-day item2">
                今日2201班<span class="green">未点评</span>
              </div>
              <div class="card-day item2">
                202202班<span class="green">李润</span>的家长回复了你的点评
              </div>
              <div class="card-day item2">
                2203班作品<span class="green">未点评</span>
              </div>
              <div class="card-bottom item2">
                <span>小贴士</span>
                <span>一分钟前</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="kaoqin-content">
    <el-row :gutter="20">
      <!-- 内容左边栏 -->
      <el-col :span="8">
        <div class="grid-content ep-bg-purple">
          <!-- tab 导航栏 -->
          <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane
              v-for="item in labelData"
              :key="item.id"
              :label="weekList[item.week]"
              :name="labelList[item.week]"
            >
              <!-- 课程表label卡片 -->
              <div class="label-box" v-for="o in 3">
                <!-- 左边的标题 -->
                <div class="label-left">
                  <div class="title">第一节课</div>
                </div>
                <!-- 描述列表 -->
                <el-descriptions :column="1" border style="flex: 1">
                  <el-descriptions-item
                    label="班级"
                    label-align="center"
                    align="center"
                  >
                    {{ item.grade }}班(暑期初级素描)
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="时间"
                    label-align="center"
                    align="center"
                  >
                    {{ item.times }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="教室"
                    label-align="center"
                    align="center"
                  >
                    {{ item.classroom }}教室
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="人数"
                    label-align="center"
                    align="center"
                  >
                    {{ item.people }}人
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="内容"
                    label-align="center"
                    align="center"
                  >
                    {{ item.content }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <!-- 内容右边栏 -->
      <el-col :span="16">
        <div class="grid-content2 ep-bg-purple">
          <!-- <> -->
          <Child/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 导入Mocks
// import Mock from "mockjs";
// import list from "@/mock/lab"
import "@/mock/lab";
import axios from "axios";
// tab
import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";

import Child from "./Child.vue";

const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// Mocks生成数据
// npm install mockjs --save-dev
interface ItemType {
  id: number;
  grade: number;
  times: string;
  classroom: number;
  people: number;
  content: string;
  week: number;
}
// 输出结果随机生成的数据（node index.js）
const labelData = ref<ItemType[]>([]);
const weekList = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
const labelList = ref([
  "first",
  "second",
  "third",
  "fourth",
  "fifth",
  "sixth",
  "seventh",
]);
const getLabelData = () => {
  axios.post("/api/lab/list").then((res) => {
    // console.log(res);
    labelData.value = res.data.result;
  });
};
onMounted(() => {
  getLabelData();
});

</script>

<style lang="less" scoped>
// 头部
.kaoqin-header {
  .el-row {
    margin-bottom: 20px;
  }
  // .el-row:last-child {
  //   margin: 0;
  // }
  .el-col {
    border-radius: 4px;
  }

  .grid-content1 {
    border-radius: 4px;
    min-height: 66px;
    // background-color: bisque;
    // margin: 0 10px 0 0;

    .title {
      line-height: 40px;
      font-size: 16px;
    }
    .words {
      line-height: 20px;
      font-size: 12px;
      color: #aab2bd;
    }
  }
  // 搜索
  .top-search {
    position: relative;
    text-align: center;
    line-height: 66px;
    input::-webkit-input-placeholder {
      color: #aab2bd; /* placeholder颜色  */
      font-size: 12px; /* placeholder字体大小  */
      // text-align: right; /* placeholder位置  */
    }
    .top-input {
      height: 34px;
      width: 80%;
      border-radius: 20px;
      border: 0;
      padding-left: 40px;
    }
    .input-icon {
      position: absolute;
      top: 20px;
      line-height: 34px;
      left: 12%;
    }
    // 提示图标
    .msg-box {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      .msg {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 0;
        background-color: #fff;
      }
    }
  }
  // 头像
  .aver {
    position: relative;
  }
  .demo-type {
    width: 40px;
    height: 40px;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.green {
  color: #1d8f8b;
}

// 导航卡片
.cards {
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 160px;
    background-color: aquamarine;
  }
  .text {
    font-size: 12px;
    color: #797979;
  }
  .item {
    height: 24px;
    line-height: 24px;
    &:last-child {
      margin-top: 16px;
      height: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .item2 {
    height: 18px;
    line-height: 18px;
    &:last-child {
      margin-top: 22px;
      height: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .box-card {
    // width: 480px;
    min-height: 160px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-button {
        padding: 0;
      }
      .card-title {
        font-size: 16px;
        font-weight: 600;
        display: flex;
        justify-content: center;
      }
    }
  }
}

//内容区域
.kaoqin-content {
  margin-top: 20px;
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
  }

  // 左边课程表
  .grid-content {
    border-radius: 4px;
    min-height: 700px;
    // background-color: #c2d1da;
  }
  // 右边学生表
  .grid-content2 {
    border-radius: 4px;
    min-height: 700px;
    // background-color: #c2d1da;
    padding: 20px;
  }

  // Tab组件
  .label-box {
    display: flex;
    margin: 10px 0;
    // 左边标题
    .label-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #e2f6f6;
    }
    .title {
      writing-mode: horizontal-tb; /* 默认值 */
      writing-mode: vertical-rl;
      writing-mode: vertical-lr;
      letter-spacing: 2em;
      color: #1d8f8b;
      padding: 0 10px;
    }
  }
}
// 内容右边栏
.right-top-bar {
  color: #1d8f8b;
}
// 页码
.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
<!-- 
  npm i axios -S
 -->
